<template>
  <div style="width: 100%; height: 100%; display: flex" class="soap-form-warpper">
    <div style="margin: 10px 8px; background-color: #fff; box-shadow: 5px #fff; height: calc(100% - 20px); width: calc(100% - 5px)">
      <div style="padding: 10px 20px; display: flex; justify-content: space-between">
        <el-radio-group v-model="radio2">
          <el-radio-button label="接口定义" value="SoapApiDefine" />
          <el-radio-button label="接口调试" value="SoapApiDebug" />
          <el-radio-button label="接口文档" value="SoapApiDocument" />
        </el-radio-group>
        <el-space v-if="radio2 === 'SoapApiDefine'">
          <el-button type="primary">保存</el-button>
          <el-button type="success">发布</el-button>
          <el-button>变更记录</el-button>
        </el-space>
      </div>
      <div style="height: calc(100% - 50px); overflow: auto">
        <soap-api-define v-if="radio2 === 'SoapApiDefine'"></soap-api-define>
        <soap-api-debug v-if="radio2 === 'SoapApiDebug'"></soap-api-debug>
        <soap-api-document v-if="radio2 === 'SoapApiDocument'"></soap-api-document>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';

import SoapApiDefine from './components/soap-api-define.vue';
import SoapApiDebug from './components/soap-api-debug.vue';
import soapApiDocument from './components/soap-api-document.vue';

defineOptions({
  name: 'SoapApiForm',
});
const radio2 = ref('SoapApiDefine');
</script>
<style lang="scss">
.pading0 {
  padding: 0 !important;
}
</style>
